<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="3386f9cf20894725a37454cab5bbe724" class="chart-container" style="width:800px; height:400px;"></div>
    <script>
        var chart_3386f9cf20894725a37454cab5bbe724 = echarts.init(
            document.getElementById('3386f9cf20894725a37454cab5bbe724'), 'white', {renderer: 'canvas'});
        var option_3386f9cf20894725a37454cab5bbe724 = {
    "baseOption": {
        "series": [
            {
                "type": "bar",
                "name": "\u57ce\u9547\u5c45\u6c11\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)",
                "data": [
                    18487,
                    19968,
                    21392,
                    23078,
                    24444,
                    26112
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                }
            },
            {
                "type": "bar",
                "name": "\u519c\u6751\u5c45\u6c11\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)",
                "data": [
                    7485,
                    8382,
                    9222,
                    10129,
                    10954,
                    12124
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                }
            }
        ],
        "timeline": {
            "axisType": "category",
            "orient": "horizontal",
            "autoPlay": false,
            "loop": true,
            "rewind": false,
            "show": true,
            "inverse": false,
            "bottom": "-5px",
            "data": [
                "\u57ce\u9547\u519c\u6751\u4eba\u5747\u53ef\u652f\u914d\u6536\u5165(\u5143)",
                "\u57ce\u9547\u519c\u6751\u5c45\u6c11\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)"
            ]
        },
        "xAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": 2017
            }
        ],
        "yAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ]
    },
    "options": [
        {
            "legend": [
                {
                    "data": [
                        "\u57ce\u9547\u4eba\u5747\u53ef\u652f\u914d\u6536\u5165(\u5143)",
                        "\u519c\u6751\u4eba\u5747\u53ef\u652f\u914d\u6536\u5165(\u5143)"
                    ],
                    "selected": {
                        "\u57ce\u9547\u4eba\u5747\u53ef\u652f\u914d\u6536\u5165(\u5143)": true,
                        "\u519c\u6751\u4eba\u5747\u53ef\u652f\u914d\u6536\u5165(\u5143)": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "series": [
                {
                    "data": [
                        26467,
                        28843,
                        31194,
                        33616,
                        36396,
                        39250
                    ]
                },
                {
                    "data": [
                        9429,
                        10488,
                        11421,
                        12363,
                        13432,
                        14617
                    ]
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "2013\u5e74",
                        "2014\u5e74",
                        "2015\u5e74",
                        "2016\u5e74",
                        "2017\u5e74",
                        "2018\u5e74"
                    ]
                }
            ],
            "title": [
                {
                    "text": "\u57ce\u9547\u519c\u6751\u4eba\u5747\u53ef\u652f\u914d\u6536\u5165(\u5143)"
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ]
        },
        {
            "legend": [
                {
                    "data": [
                        "\u57ce\u9547\u5c45\u6c11\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)",
                        "\u519c\u6751\u5c45\u6c11\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)"
                    ],
                    "selected": {
                        "\u57ce\u9547\u5c45\u6c11\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)": true,
                        "\u519c\u6751\u5c45\u6c11\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "series": [
                {
                    "data": [
                        18487,
                        19968,
                        21392,
                        23078,
                        24444,
                        26112
                    ]
                },
                {
                    "data": [
                        7485,
                        8382,
                        9222,
                        10129,
                        10954,
                        12124
                    ]
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": 2017
                }
            ],
            "title": [
                {
                    "text": "\u57ce\u9547\u519c\u6751\u4eba\u5747\u4eba\u5747\u6d88\u8d39\u652f\u51fa(\u5143)"
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ]
        }
    ]
};
        chart_3386f9cf20894725a37454cab5bbe724.setOption(option_3386f9cf20894725a37454cab5bbe724);
    </script>
</body>
</html>
